/*初始化css*/
/*这种注释会编译到css中去*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrap {
  position: relative;
  width: 3.75rem;
  height: 5rem;
  margin: 0 auto;
  border: 1px pink solid;
}
#wrap .inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.25rem;
  width: 1.25rem;
  margin: auto;
  background-color: aqua;
  /*嵌套规则，希望:hover在inner不是平级关系，而是连在一起*/
}
#wrap .inner:hover {
  background: pink;
}
/*.triangle(@_ , @c){
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  //可变参数引用
  .border(40px , solid)
}
//可变参数 @arguments  感觉没什么乱用
.border(@1 , @2){
  border: @arguments;
}
*/
.triangle,
#sjx:hover {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  border: 40px solid;
}
#sjx {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  border: 40px solid;
  border-color: transparent transparent #af0be3 transparent;
}
#sjx:hover {
  border-color: transparent #a41030 transparent transparent;
}
